<template>
  <div class="main">
    <el-card header="信息登记">
      <el-form ref="editForm" :model="editData" :rules="editRules" :disabled="formDisabled" size="small"
        label-position="top">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="editData.userName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editData.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardNumber">
          <el-input v-model="editData.idCardNumber" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="accountNumber">
          <el-input v-model="editData.accountNumber" placeholder="请输入银行卡号" />
        </el-form-item>
        <el-form-item label="开户行" prop="accountBankName">
          <el-input v-model="editData.accountBankName" placeholder="请输入开户行" />
        </el-form-item>
        <el-form-item prop="agree">
          <el-checkbox v-model="editData.agree">同意 </el-checkbox>
          <el-link type="primary" @click="agreeVisible = true">协议</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="clickSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="协议" :visible.sync="agreeVisible" custom-class="secret-staff-agree">
      <h2 style="text-align: center">自由职业者合作协议</h2>
      【审慎阅读】为维护您的自身权益，在您申请注册流程中点击同意本协议之前，请认真阅读本协议，务必审慎阅读、充分理解各条款内容，特别是权利义务条款、法律适用和管辖条款 。上述条款以粗体标识，您应重点阅读。<br/>
      本服务三方协议（以下简称“本协议”） 由以下三方根据《中华人民共和国合同法》、《民法典》等法律签订并遵照执行，不适用《劳动合同法》。<br/>
      自由职业者：包含零工和网上工作室，指自我雇佣、自我管理、自担成本、自负盈亏并通过亨薪互联网平台注册并确认签订本协议，通过平台从事合法合规生产经营活动而临时取得经营收入的自然人。
      灵工运营方：入驻亨薪平台的灵工结算服务生态运营方及其所属灵活用工服务企业，给自由职业者和业务外包方提供互联网共享经济综合服务。<br/>
      业务外包方：根据本协议及其与平台方、灵工运营方另行签署的其他协议之约定，与自由职业者形成经营合作关系，并向自由职业者支付经营所得的公司。<br/>
      亨薪平台基于先进的互联网大数据技术，构建了任务信息收集、推送、反馈的凭条，并根据自由职业者的信息将需求信息有偿提供给业务外包方，最终众包或分包业务外包方需求予自由职业者，双方之间自愿订立自由职业者合作协议。<br/>
      【特别提示】本协议项下灵工运营方为自由职业者用户和业务外包方提供服务仅限于获得生产经营收入的自由职业者。针对获得生产经营收入的自由职业者在使用本协议项下亨薪平台提供的互联网共享经济综合服务时，灵工运营方承诺依法纳税、确保自由职业者纳税人取得税后合法收入。<br/>
      军人、公职人员等国家法律法规和纪律规定禁止从事兼职或经商的人员，严禁使用本协议项下亨薪平台提供的互联网共享经济综合服务。<br/>
      公司雇员等其他与公司具有劳动合同关系或事实劳动关系、或其他类似的劳动人事法律关系并从与其有前述关系的公司取得工资薪金所得的人员，严禁使用本协议项下亨薪平台提供的互联网共享经济综合服务；但该类人员因从事生产经营而从非与其有前述关系的企事业单位所取得的生产经营所得，亨薪平台可为其提供本协议项下的互联网共享经济综合服务。
      公司法定代表人、股东、董事、监事等其他从所属公司取得收入的人员 ，一律严禁使用本协议项下亨薪平台提供的互联网共享经济综合服务；该类人员因从事生产经营而从非与其有前述关系的企事业单位所取得的生产经营所得，亨薪平台可为其提供本协议项下的互联网共享经济综合服务。<br/>
      一经发现违反上述任一规定行为的，亨薪平台有权上报主管税务机关或其他相关国家机关，由有关部门根据《中华人民共和国税收征收管理法》及其相关法律法规的规定追究责任主体的法律责任。
      【签约】 当您按照亨薪平台注册页面提示填写信息、阅读并同意本协议且完成全部注册程序后 ，即表示您已充分阅读、理解并接受本协议的全部内容，并与灵工运营方及业务外包方达成一致，成为业务外包方及灵工运营方的经营合作伙伴。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，请您立即停止任何的申请/注册/或书面签署程序。
      【合作关系】您与业务外包方及灵工运营方通过本协议建立经营合作关系，适用《合同法》《民法典》和其他民事法律，不适用《劳动合同法》。
      一、 平台定义<br/>
      亨薪互联网共享经济平台： 以下简称“亨薪平台”， 是指为业务外包方展示企业服务或业务外包需求，由灵工运营方众包或分包该业务并展示服务需求信息、 单笔服务费用、服务完成确认、资金担保支付、票据闭环及合规纳税等信息的互联网平台。亨薪平台签约自由职业者可通过平台自主选择接收任务事项，并在事项完成后获得经营平台显示的经营服务费及相应奖励（如有）。
      二、协议内容<br/>
      2.1 您同意与灵工运营方及业务外包方签订自由职业者合作协议，按照亨薪平台展示的经营服务需求信息内容、要求、标准，自主选择接收服务事项，及时完成并收取灵工运营方支付的经营收入及相应奖励（如有）。
      2.2 您保证能按时并且安全的完成经营需求相关的服务事宜，因您的原因导致的任何第三方的损失，您应该承担包括但不限于赔偿的责任。
      2.3 您在亨薪平台接收发布的业务服务需求后，不可随意取消订单，如您取消订单，您将按照亨薪平台公示的业务规则承担相应金额的违约金。
      2.4 合作期限基于亨薪平台确认发布业务外包项目的服务期限，业务外包实际开始时间即为各方合作期限的开始，业务外包实际完成时间即为各方合作期限的结束，您根据自身情况可承接多个业务外包内容，合作期限可重叠交叉、单独核算。
      2.5 如您未严格按照服务作业计划和作业要求进行服务作业的，您将按照亨薪平台显示的违约金数额支付违约金。具体服务计划和作业要求按照亨薪平台公示的业务外方发包作业标准内容为准。
      2.6 因政府行为（包括但不限于因中国政府机关不授予或取消灵工运营方相应经营资质或权利、主管税务机关调整代征税率及代征范围等）或其他不可抗力因素导致本协议部分条款或全部条款无法履行的，各方均不承担违约责任。
      三、经营服务费<br/>
      3.1【计价标准】 经营服务费及相应奖励的计算标准以亨薪平台显示的数据为准。
      3.2【结款周期】 当您完成任务一定周期内或提出结算申请后，经核实您提供的服务符合标准且无误后，灵工运营方将在您提出结算申请的 3 个工作日内将经营服务费及相应奖励等经营收入支付到您向平台提交的银行账号上。
      四、注册资格<br/>
      请保证，您在注册亨薪平台用户时需年满18周岁以上，身体健康拥有健康证，并具有完全民事行为能力和相应劳动能力。若您不具备前述条件，您及/或您的监护人应依照法律规定承担因此而导致的一切后果。
      五、账号说明<br/>
      5.1【账户获得】 当您按照注册页面提示填写信息并完成全部注册程序后，您可获得亨薪平台账户。在您承揽项目之前，您须进行实名认证、绑定结算银行账户、阅读并同意本协议、面部活体认证，成为签约自由职业者。
      5.2【账户安全】您的账户为您自行设置及保管，亨薪平台任何时候均不会主动要求
      您提供您的账户。因此，建议务必妥善使用您的账户，保管好您的账户密码。账户
      因您泄露或遭受他人攻击、诈骗等行为导致的损失及后果，均由您自行承担。
      六、业务外包方义务<br/>
      6.1 业务外包方根据外包项目制定服务作业计划和作业要求，在亨薪平台展示，并最终确认、督导自由职业者按照服务作业计划和作业要求进行服务作业。
      6.2 业务外包方不负责处理您承揽服务期间发生的所有用工问题，但自由职业者委托提供代理的除外。
      6.3 业务外包方应及时向灵工运营方及自由职业者支付经营服务款项。
      七、您的义务<br/>
      7.1 您应该确保注册信息的真实性、完整性、合法性。您承诺并保证您所提供的签约信息真实、准确，以免影响您和平台各参与方之间的《自由职业者合作协议》效力。本协议条款在平台网站上发布，自您线上点击确认之日起生效。您点击确认后该协议将对您产生法律效力。
      7.2 您应确保承揽亨薪平台发包业务服务时满足履行服务所需的法定条件或约定条件，保证为业务外包方及灵工运营方提供生产经营活动时，遵照其业务规则并自备所需要的设备设施、经营工具等所有生产资料，自行承担经营活动所产生的所有费用，自负盈亏。
      7.3 您应该确保提供服务环节中的安全，根据自身实际情况自行购买商业保险并自行处理投保、出险及理赔事宜，不得要求包活平台方在内的基于本协议的各参与方为其购买任何保险，不侵犯任何第三方的权益。
      7.4 任何期间均不得使用或借用亨薪平台名义雇佣人员，也不得将在亨薪平台接受的任务事项转交项目组之外他人完成。
      7.5 在接受、完成任务事项过程中获取的任何有关亨薪平台或任何第三方的信息， 包括但不限于发包项目的联系方式、电话、地址等均应严格保密，不得传播、泄漏、披露，不得在为完成本协议任务事项之外的目的自行或允许他人使用。该保密义务不因协议的终止、解除而无效，其保密期限自保密信息向社会公开之日起或另一方书面解除此保密义务止。若您违反上述义务，由您承担一切责任。
      八、涉税事务委托授权<br/>
      8.1、您/本人委托已入驻平台且与您存在实质业务外包关系的灵工运营方代理本合同交易项下的涉税事务，包括代理报税、代开发票和代开个人完税证明。<br/>
      8.2、您/本人确认灵工运营方根据本合同授权提交的相关申报资料和信息是真实、完整、准确，和符合有关法律法规的。 您/本人确认与灵工运营方的合作公司不存在法律上和事实上的人事劳动关系，不属于合作公司人事管理权限范围内的个人，也并非其股东。<br/>
      九、法律适用与管辖
      <br/>
      9.1 本条款的订立、执行和解释及争议的解决均应适用中国法律。<br/>
      9.2 如您就本协议内容或其执行发生任何争议，各方应尽力友好协商解决；协商不
      成时，各方一致同意提交至被告所在地有管辖权的人民法院诉讼解决。
      签署声明：<br/>
      您已充分知悉且已理解本协议全部内容，并保证本次注册点击行为为您完全之意思表示，并充分且有效授权订立本协议。
    </el-dialog>
  </div>
</template>
<script>
import { Loading } from 'element-ui';
import { Message, MessageBox } from 'element-ui';
import { secretStaffLoad, secretStaffSave } from '@/api/secret';

export default {
  name: "secretStaff",
  props: ['secret'],
  data() {
    return {
      formDisabled: false,
      agreeVisible: false,
      editData: {
        userName: '',
        phone: '',
        idCardNumber: '',
        accountNumber: '',
        accountBankName: '',
      },
      editRules: {
        userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        idCardNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        accountNumber: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
        accountBankName: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
        agree: [{ required: true, message: '请阅读并同意协议', trigger: 'blur' }],
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      secretStaffLoad(this.secret).then((res) => {
        if (res.code === 200) {
          this.editData = res.data
        }
      })
    },
    clickSave() {

      this.$refs.editForm.validate((valid) => {
        if (!valid) return;
        this.formDisabled = true
        MessageBox.confirm(
          '只能保存一次，请确认数据填写正确！',
          '系统提示', {
          type: 'warning',
          customClass: 'secret-staff-messagebox',
        }).then(() => {
          return secretStaffSave(this.secret, this.editData);
        }).then((res) => {
          if (res.code === 200) {
            Message.success('保存成功')
            if (this.editData.synchronousUrl){
              Loading.service({
                lock: true,
                text: '页面即将跳转，请稍候...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              window.location.href = this.editData.synchronousUrl+"?externalId="+this.editData.openId
            }
          }
        }).catch(() => {
          this.formDisabled = false
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 10px;
}

::v-deep .el-dialog__body{
  padding-top: 0;
}

.el-message-box {
  width: 250px;
}

@media(min-width:520px) {
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;

    .el-card {
      width: 500px;
    }

    .el-form-item__label {
      margin-bottom: unset;
    }
  }
}
</style>
<style>
.secret-staff-messagebox {
  width: 200px !important;
}

.secret-staff-agree {
  width: 90% !important;
  margin-top: 5vw !important;
  margin-bottom: 5vw !important;
}

.secret-staff-agree p {
  margin-top: 5px;
  margin-bottom: 5px;
}

@media(min-width:600px) {
  .secret-staff-agree {
    width: 540px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}
</style>
